<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wallpaper Player</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        body{
            background-color: white;
            overflow: hidden;
        }
    </style>
</head>
<style>
    .vid_bar{
        background-color: #ddd;
        position:relative;
    }
    .bg_vid{
        width: 111%;
        position: absolute;
        background-color:black;
        top: 0;
        bottom: 0;
        left: 0;
        right:0;
        margin: auto
    }
    .video_jx{
        transform: rotateY(180deg);
        -webkit-transform:rotateY(180deg); /* Safari and Chrome */
        -moz-transform:rotateY(180deg); /* Firefox */
    }
</style>
<div class="vid_bar" id="vid_bar">
    <video class="bg_vid " id="bg_vid" autoplay loop muted><source src="wallpaper/fTVba8EsZn/video.mp4"></video>
</div>
<script>
    async function set_bg(){
        vid_e = document.getElementById("bg_vid")
        vid_bar = document.getElementById("vid_bar")

        vid_bar.style.width = window.innerWidth+"px"
        vid_bar.style.height = window.innerHeight+"px"
    }
    setTimeout(set_bg,500)
    async function run() {
        console.log('pywebview is ready');

        vid_offset = -141.66666666666757
        win_w = window.innerWidth

        s_data =  await parent.get_screen_inf()
        sfbl = win_w/s_data["w"]
        set_offset = vid_offset*sfbl
        document.getElementById("bg_vid").style.marginLeft=set_offset+"px"
    };
    run()
</script>